<template>
	<!-- :confirm-loading="submitLoading" -->
	<a-modal :visible="visible" title="标签" :confirm-loading="submitLoading" :mask-closable="false" @cancel="handleClose"
		:zIndex="1081" @ok="handleSubmit">
		<a-tabs tab-position="left" v-model:activeKey="activeKey" @change="handleTabChange" v-if="groupList.length > 0">
			<a-tab-pane v-for="(item) in groupList" :key="item.id" :tab="item.name">
				<a-spin style="margin-left: 150px; margin-top: 40px;" v-if="loading" />
				<a-tag @click="chooseTag(tag_item)"
					:color="selectedList.findIndex(v => (v.name && v.id == tag_item.id) || (!v.name && v.tag_id == tag_item.id)) != -1 ? 'error' : 'default'"
					class="tag_item" v-for="(tag_item, tag_index) in tagList" :key="tag_index">

					<a-tooltip zIndex="9999" v-if="tag_item?.name?.length > 10" :title="tag_item?.name">
						<span style="cursor: pointer;">
							{{ `${tag_item?.name?.slice(0, 10)}...` }}
						</span>
					</a-tooltip>
					<span v-else>
						{{ tag_item?.name }}
					</span>
				</a-tag>
				<template v-if="!loading">
					<a-input placeholder="请输入标签" v-if="inputVisible" ref="inputRef" v-model:value="inputValue"
						type="text" size="small" :style="{ width: '78px', marginTop: '8px' }" @blur="handleInputConfirm"
						@keyup.enter="handleInputConfirm" />
					<a-tag v-else style="background: #fff; border-style: dashed; margin-top: 8px;" @click="showInput">
						<plus-outlined />
						添加标签
					</a-tag>
				</template>
			</a-tab-pane>
		</a-tabs>
		<a-empty v-else :image="simpleImage" />
	</a-modal>
</template>

<script>
import {
	ref,
	reactive,
	toRefs,
	defineComponent,
	watch,
	nextTick
} from 'vue';
import request from "@/common/utils/request";
import {
	message
} from 'ant-design-vue';
import {
	PlusOutlined
} from '@ant-design/icons-vue';
import { Empty } from 'ant-design-vue';
export default defineComponent({
	components: {
		PlusOutlined
	},
	props: {
		tagtype: {
			type: String,
		},
		merchant_folder_statck_id: {
			type: String,
		},
		ischooses: {
			type: Boolean,
			default: false
		},
		fileIds: {
			type: Array,
			default: () => {
				return []
			}
		},
		visible: {
			type: Boolean,
			default: false
		},
		labelInfo: {
			type: Object,
			default: () => {
				return {}
			}
		},
		checkedList: {
			type: Array,
			default: () => {
				return []
			}
		}
	},
	setup(props, context) {
		const formRef = ref()
		const state = reactive({
			activeKey: null,
			groupList: [],
			tagList: [],
			submitLoading: false,
			loading: false,
			inputVisible: false,
			inputValue: '',

			selectedList: []
		})

		const handleClose = () => {
			context.emit('close')
		}

		const handleSubmit = () => {

			state.submitLoading = true
			let bindTags = []
			state.selectedList.map(item => {
				if (item?.name) {
					bindTags.push({
						tag_id: item?.id,
						tag_group_id: item.tag_group_id
					})
				} else {
					bindTags.push({
						tag_id: item?.tag_id,
						tag_group_id: item.tag_group_id
					})
				}
			})
			if (bindTags.length !== 0) {
				if (props.tagtype == 'file') {
					// 文件夹打标签
					let queryData = {
						merchant_folder_statck_id: props.merchant_folder_statck_id,
						bindTags: bindTags
					}
					request.post('/work_ai', '/user/shotstack/multimedia/bindFolderTags', queryData)
						.then(res => {

							state.submitLoading = false
							message.success('修改成功！')
							context.emit('close', true)
						}).catch(err => {
							state.submitLoading = false

						})
				} else if (props.ischooses == true) {
					// 多选打标签
					let queryData = {
						merchant_folder_statck_id: props.merchant_folder_statck_id,
						fileIds: props.fileIds,
						bindTags: bindTags
					}
					request.post('/work_ai', '/user/shotstack/multimedia/bindFilesTags', queryData).then(res => {
						state.submitLoading = false
						message.success('修改成功！')
						context.emit('close', true)

					}).catch(err => {

					})
				} else {
					// 单选打标签
					request.post('/work_ai', '/user/shotstack/multimedia/bindTags', {
						multimedia_id: props?.labelInfo?.id,
						bindTags,
					}).then(res => {
						state.submitLoading = false
						message.success('修改成功！')
						context.emit('close', true)
					}).catch(err => {
						state.submitLoading = false
					})
				}
			} else {
				message.error('请先选标签！')
				state.submitLoading = false

			}

		}

		const getGroupList = () => {
			request.get('/work_ai', '/user/shotstack/multimedia/tagGroupSelect').then(res => {
				state.groupList = res.result.select
				if (res.result.select?.length) {
					state.activeKey = res.result.select[0].id
					getTagList(res.result.select[0].id)
				}
			})
		}

		const getTagList = (group_id) => {
			state.tagList = []
			state.loading = true
			request.get('/work_ai', '/user/shotstack/multimedia/tagList', {
				page: 1,
				pageSize: 0,
				tag_group_id: group_id
			}).then(res => {
				state.tagList = res.result
				state.loading = false
			}).catch(err => {
				state.loading = false
			})
		}

		const handleTabChange = (key) => {
			getTagList(key)
		}

		const handleInputConfirm = () => {
			if (state.inputValue) {
				request.post('/work_ai', '/user/shotstack/multimedia/tag', {
					tag_group_id: state.activeKey,
					name: state.inputValue
				}).then(res => {
					state.inputVisible = false
					state.inputValue = ''
					getTagList(state.activeKey)
				})
			} else {
				state.inputVisible = false
				state.inputValue = ''
			}
		}

		const inputRef = ref()

		const showInput = () => {
			state.inputVisible = true;
			nextTick(() => {
				inputRef.value?.focus();
			});
		}

		const getSelectedTags = () => {
			state.selectedList = []
			request.get('/work_ai', '/user/shotstack/multimedia/tags', { multimedia_id: props.labelInfo?.id }).then(res => {
				if (res.result) {
					state.selectedList = res.result.bind_tags
				}
			})
		}

		const chooseTag = (item) => {
			let index = state.selectedList.findIndex(v => (v.name && v.id == item.id) || (!v.name && v.tag_id == item.id))
			if (index == -1) {
				state.selectedList.push({ ...item, tag_id: item.id })
			} else {
				state.selectedList.splice(index, 1)
			}
		}

		watch(() => props.visible, val => {
			if (val) {
				getGroupList()
				if (props?.labelInfo?.id) {
					state.selectedList = props?.labelInfo?.bind_tags
					getSelectedTags()
				}
			}
		})

		return {
			...toRefs(state),
			handleClose,
			handleSubmit,
			handleTabChange,
			handleInputConfirm,
			showInput,
			inputRef,
			chooseTag,
			simpleImage: Empty.PRESENTED_IMAGE_SIMPLE,
		}
	}
})
</script>

<style lang="less" scoped>
.tag_item {
	cursor: pointer;
}
</style>
